<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
	    <title>hoyo</title>
		
	    <!-- Bootstrap -->
	    <link href="/hoyo/css/bootstrap.min.css" rel="stylesheet">
	    <link href="/hoyo/css/mine.css" rel="stylesheet" />
	    <style>
	    	#data-nav{
	    		margin-bottom: 0px;
	    	}
	    	#tele-box{
		    	font-family: "微软雅黑";
		    	font-size: 14px;
		    	margin-top: 55px;
		    }
		    .tele-box-span{
		    	font-size: 18px;
		    	vertical-align: top;
		    	margin-right: 10px;
		    	color: #99A2AA;
		    }

		    .line{
		    	border-top: 1px solid #e5e9ef;
		    	vertical-align: middle;
		    }
		    .oneicon{
		    	background-color: #fff;
		    	width: 20px;
		    	height: 20px;
		    	color: #ccd0d7;
		    	font-family: arial;
		    	font-weight: 700;
		    	border-radius: 50%;
		    	line-height: 20px;
		    	border: 2px solid #CCD0D7;
		    	margin: 0 10px;
		    	font-size: 14px;
		    	text-align: center;
		    	vertical-align: middle;
		    	box-sizing: content-box;
		    }
		    .eiconon{
		    	border-color: #F25D8E;
		    	color: #F25D8E;
		    }
		    .spanon{
		    	color: #F25D8E;
		    }
		    .one{
		    	width: 200px;
		    }
		    .two{
		    	width: 80px;
		    }
		    .check_head span{
		    	display: inline-block;
		    }
		    .check_head{
		    	width: 100%;
		    	margin: 18px 0 60px;
		    	text-align: center;
		    }
		    .msg{
		    	color: #E40C0C;
		    	margin-top: 10px;
		    	font-size: 10px;
		    	font-family: "微软雅黑";
		    }
		    .main-box{
		    	width: 348px;
		    	min-height: 340px;
		    	margin: 0 auto;
		    }
		    .bindphone{
		    	width: 100%;
		    	height: 38px;
		    	padding: 10px;
		    	box-sizing: border-box;
		    	border-radius: 4px;
		    	border: 1px solid #e5e9ef;
		    	background-color: #f4f5f7;
		    }
		    .success-box{
		    	width: 348px;
		    	min-height: 340px;
		    	margin: 0 auto;
		    	text-align: center;
		    }
		    .breadcrumb{
		    	background-color: #FFFFFF;
		    }
	    </style>
	</head>
	<body>
		
			
		<div id="data-nav" class="navbar">
			<div class="container">
		  	<div class="navbar-header">
		      <a class="navbar-brand" href="/hoyo/">
		      	<img src="/hoyo/img/logo.png" class="data-img"/>
		      	<span class="data-span">主页</span>
		      </a>
		    </div>
		
	      <ul id="contributor" class="nav navbar-nav navbar-right">
	      	<li>
	      		<a class="data-user" href="/hoyo/user/personalCenter">
	      			<img th:src="${session.userInfo.icon}" class="data-img img-circle" />
	      			<span class="nav-user-name" th:text="${session.userInfo.nickname}">iscream</span>
	      		</a>
	      	</li>
	        <li class="dropdown">
	          <a href="/hoyo/upload" class="dropdown-toggle data-color">投稿</a>
	      	</li>
	      </ul>
		  </div>
		</div>
		
		<div class="container-fluid" style="background-color: #00a0d8;margin-bottom: 50px;">
			<div class="container">
				<img src="/hoyo/img/login-bc.png" />
			</div>
		</div>
		<div class="container">
			<ol class="breadcrumb">
			  <li><a href="/hoyo/user/safeCenter">账号安全</a></li>
			  <li class="active">更换绑定手机</li>
			</ol>
			<div id="tele-box" style="display: none;">
				<div class="check_head">
					<span class="line one"></span>
					<span class="oneicon" :class="{'eiconon':(status=='first')}">1</span>
				 	<span class="tele-box-span" :class="{'spanon':(status=='first')}">验证手机</span>
				 	<span class="line two"></span>
				 	<span class="oneicon" :class="{'eiconon':(status=='second')}">2</span>
				 	<span class="tele-box-span" :class="{'spanon':(status=='second')}">绑定手机</span>
				 	<span class="line two"></span>
				 	<span class="oneicon" :class="{'eiconon':(status=='third')}">3</span>
				 	<span class="tele-box-span" :class="{'spanon':(status=='third')}">绑定成功</span>
				 	<span class="line one"></span>
				</div>
				<div class="main-box" v-if="status=='first'">
					<div class="bindphone">
						<span>原手机号: {{fomatTele}}</span>
					</div>
					<div class="input-group" style="margin-top: 28px;">
				      <input type="text" class="form-control" v-model='first.code' placeholder="请输入验证码">
				      <span class="input-group-btn">
				        <button class="btn btn-default" type="button" id='btn-first' @click="getVerificationCode('first',bindPhone)">{{verifcodeMsg1}}</button>
				      </span>
				    </div>
				    <p class="msg" :visibility='first.visibility1'>{{first.msg1}}</p>
				    <button type="button" style="margin-top: 28px;"  class="btn btn-info btn-block" @click="checkVerificationCode(bindPhone,first.code)">下一步</button>
				</div>
				
				<div class="main-box" v-if="status=='second'">
					<div >
						<input type="text" class="form-control" :value="second.phone" @input="checkPhone($event.target.value)"  placeholder="请输入手机号">
					</div>
					<p class="msg" :visibility='second.visibility2'>{{second.msg2}}</p>
					<div class="input-group" style="margin-top: 18px;">
				      <input type="text" class="form-control" v-model='second.code' placeholder="请输入验证码">
				      <span class="input-group-btn">
				        <button class="btn btn-default"  id='btn-second' type="button" @click="getVerificationCode2('second',second.phone)" disabled=true>{{verifcodeMsg2}}</button>
				      </span>
				    </div>
				    <p class="msg" :visibility='second.visibility1'>{{second.msg1}}</p>
				    <button type="button" style="margin-top: 28px;" class="btn btn-info btn-block" @click="submitBtn(second.phone,second.code)">下一步</button>
				</div>
				
				<div class="success-box" v-if="status=='third'">
					<h2>更换绑定手机号成功！</h2>
				    <a href="/hoyo/user/safeCenter" style="margin-top: 28px;" class="btn btn-info">返回个人中心</a>
				</div>
			</div>
						
		</div>
		
	</body>
	<script src="/hoyo/js/jquery-3.2.1.min.js"></script>
    <script src="/hoyo/js/bootstrap.min.js"></script>
    <script src="/hoyo/js/vue1.0.26.js"></script>
    <script src="/hoyo/js/iconfont.js"></script>
    <script th:inline="javascript">
    	var teleVm = new Vue({
    		el:"#tele-box",
    		data:{
    			first:{msg1:'',visibility1:'hidden',time:60,verifcode:false,code:''},
    			second:{msg1:'',visibility1:'hidden',msg2:'',visibility2:'hidden',time:60,verifcode:false,code:'',phone:''},
    			status:'first',
    			bindPhone:[[${session.user.phone}]],
    			hasError:false
    		},
    		computed:{
    			fomatTele:function(){
    				var format = this.bindPhone.substr(3,5);
    				return this.bindPhone.replace(format,'*****');
    			},
    			verifcodeMsg1:function(){
    				return this.first.verifcode?'重新获取('+this.first.time+'s)':'获取验证码';
    			},
    			verifcodeMsg2:function(){
    				return this.second.verifcode?'重新获取('+this.second.time+'s)':'获取验证码';
    			}
    		},
    		created: function () {
		    	$("#tele-box").show();
		    },
    		methods:{
    			checkPhone:function(value){
    				this.$set("second.phone",value);
    				
    				var telephonePattern = /^1(3|4|5|7|8)\d{9}$/;
    				if(!telephonePattern.test(value)){
    					$("#btn-second").attr("disabled",true);
			    		this.$set("second.msg2","手机号码格式不正确");
			    		this.$set("second.visibility2","visible");
			    		this.$set("hasError",true);
			    	}else{
			    		this.$set("second.visibility2","hidden");
			    		this.$set("second.msg2","");
			    		this.$set("hasError",false);
			    		$("#btn-second").attr("disabled",false);
			    	}
    			},
    			animation:function(order){
					this.$set(order+".verifcode",true);
					var e = 60;
					var interval = setInterval(function(){
						e--;
						teleVm.$set(order+".time",e);
					},1000);
					setTimeout(function(){
						teleVm.$set(order+".verifcode",false);
						clearInterval(interval);
						teleVm.$set(order+".time",60);
						$("#btn-"+order).attr("disabled",false);
					},60000);
				},
				getVerificationCode:function(order,telephone){
					$("#btn-"+order).attr("disabled",true);
					var checked = false;
					var flag = false;	
					$.post({
			    		url:"/hoyo/telephone/check",
			    		data:"telephone="+telephone,
			    		success:function(responseText, textStatus, jqXHR){
			    			var result = JSON.parse(responseText);
			    			if(result.success){
			    				teleVm.$set(order+'.visibility1',"visible");
			    				teleVm.$set(order+'.msg1','不存在该手机号，请刷新页面重试!');
								$("#btn-"+order).attr("disabled",false);
								checked = false;
								flag = true;
							}else{
								checked = true;
								flag = true;
							}
			    		}
			    	});
					
					var interval = setInterval(function(){
						if(flag){
							clearInterval(interval);
							if(checked){
								$.post({
						    		url:"/hoyo/telephone/code",
						    		data:"telephone="+telephone,
						    		success:function(responseText, textStatus, jqXHR){
						    			var result = JSON.parse(responseText);
						    			if(result.success){
						    				teleVm.animation(order);
						    				teleVm.$set(order+'.visibility1',"visible");
						    				teleVm.$set(order+'.msg1','验证码已发送');
						    			}else{
						    				teleVm.$set(order+'.msg1','该手机号发送频率过高，暂不能发送!');
						    				$("#btn-"+order).attr("disabled",false);
						    			}
						    		}
						    	});
							}
						}
					});
				},
				getVerificationCode2:function(order,telephone){
					$("#btn-"+order).attr("disabled",true);
					var checked = false;
					var flag = false;
					$.post({
			    		url:"/hoyo/telephone/check",
			    		data:"telephone="+telephone,
			    		success:function(responseText, textStatus, jqXHR){
			    			var result = JSON.parse(responseText);
			    			if(!result.success){
			    				teleVm.$set(order+'.visibility2',"visible");
			    				teleVm.$set(order+'.msg2','该手机号已被绑定');
								$("#btn-"+order).attr("disabled",false);
								checked = false;
								flag = true;
							}else{
								checked = true;
								flag = true;
							}
			    		}
			    	});
					
					var interval = setInterval(function(){
						if(flag){
							clearInterval(interval);
							if(checked){
								$.post({
						    		url:"/hoyo/telephone/code",
						    		data:"telephone="+telephone,
						    		success:function(responseText, textStatus, jqXHR){
						    			var result = JSON.parse(responseText);
						    			if(result.success){
						    				teleVm.animation(order);
						    				teleVm.$set(order+'.visibility1',"visible");
						    				teleVm.$set(order+'.msg1','验证码已发送');
						    			}else{
						    				teleVm.$set(order+'.msg1','该手机号发送频率过高，暂不能发送');
						    				$("#btn-"+order).attr("disabled",false);
						    			}
						    		}
						    	});
							}
						}
					});
				},
				checkVerificationCode:function(telephone,code){
					if(code.trim()==''){
						this.$set('first.visibility1',"visible");
						this.$set('first.msg1',"验证码不能为空");
						return;
					}
					$.post({
			    		url:"/hoyo/code/verify",
			    		data:"code="+code,
			    		success:function(responseText, textStatus, jqXHR){
			    			var result = JSON.parse(responseText);
			    			if(result.success){
			    				teleVm.$set('status','second');
			    			}else{
			    				teleVm.$set('first.visibility1',"visible");
			    				teleVm.$set('first.msg1',"验证码不正确或已失效");
			    			}
			    		}
			    	});
				},
				submitBtn:function(telephone,code){
					
					if(telephone.trim()==''){
						this.$set('second.visibility2',"visible");
						this.$set('second.msg2',"手机号不能为空");
					}
					
					if(code.trim()==''){
						this.$set('second.visibility1',"visible");
						this.$set('second.msg1',"验证码不能为空");
						return;
					}
					$.post({
			    		url:"/hoyo/user/telephone/bind",
			    		data:"telephone="+telephone+"&code="+code,
			    		success:function(responseText, textStatus, jqXHR){
			    			var result = JSON.parse(responseText);
			    			if(result.success){
			    				teleVm.$set('status','third');
			    			}else{
			    				teleVm.$set('second.visibility1',"visible");
			    				teleVm.$set('second.msg1',"验证码不正确或已失效");
			    			}
			    		}
			    	});
				}
    		}
    	});
    	
       </script>
</html>
